<template>
  <base-breadcrumb :title="$route.meta.title">
    <a-card :bordered="false" style="over-flow: scroll">
      <!-- <title-name title="安全检查类型维护"></title-name> -->
      <a-button type="primary" icon="plus" class="mb12" @click="handleManage(0)" v-if="hideBuquBtn()">添加检查类型</a-button>
      <div>
        <list-table
          ref="table"
          tableLayout="fixed"
          size="default"
          rowKey="id"
          :columns="columns"
          :request="loadData"
          :isScrollX="false"
          :alert="true"
          show-size-changer
          show-quick-jumper
          showPagination="auto"
        >
          <span slot="action" slot-scope="text, record">
            <MoreButton>
              <a @click="handleManage(2, record)">查看</a>
              <a @click="handleManage(1, record)" v-if="hideBuquBtn()">编辑</a>
              <a :class="{ del_btn: record.status == 1 }" v-if="hideBuquBtn()" @click="handleSwitch(record)">{{
                ['启用', '停用'][record.status]
              }}</a>
            </MoreButton>
          </span>
        </list-table>
      </div>
    </a-card>
    <dialog-inspection
      ref="dialogInspection"
      :visible.sync="visible"
      :editModel="editModel"
      :form="form"
      :headerTitle="headerTitle"
      @conform="submitForm"
    ></dialog-inspection>
  </base-breadcrumb>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { checkType } from '@/api/quality/safe' // 问题维护api
import dialogInspection from '@/views/quality/safe/safeInspection/inspectionTypeMaintenance/dialogInspection.vue' // 检查类型表单弹窗

const columns = [
  {
    title: '安全检查类型名称',
    dataIndex: 'securityCheckTypeName',
    width: 200,
  },
  {
    title: '检查类型描述',
    dataIndex: 'securityRisksDescription',
    width: 200,
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 120,
    customRender(status) {
      return status == 1 ? '启用' : '禁用'
    },
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 200,
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  name:'a'+ Date.now(),
  components: {
    STable,
    dialogInspection,
  },
  data() {
    this.columns = columns
    return {
      // 操作类型：0 添加 1 编辑 2 查看
      editModel: 0,
      // 检查类型表单弹窗控件
      visible: false,
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return checkType.getList(requestParameters).then((res) => {
          return res
        })
      },
      form: {},
    }
  },
  computed: {
    // 弹窗动态标题
    headerTitle() {
      return ['添加安全检查类型', '编辑安全检查类型', '查看安全检查类型'][this.editModel]
    },
  },
  methods: {
    // 提交检查类型表单
    submitForm(e) {
      let that = this
      let name = ['create', 'update'][that.editModel] // 根据操作切换url地址
      checkType[name](e)
        .then((res) => {
          // if(res.code == 200){
          that.$refs.dialogInspection.loading = false
          that.$message.success(['添加', '编辑'][that.editModel] + '成功！')
          that.visible = false
          that.$refs.table.loadData()
          // }
        })
        .catch((res) => {
          that.$refs.dialogInspection.loading = false
        })
    },
    // 表格操作
    handleManage(type, record) {
      this.visible = true
      this.editModel = type
      // 传递行参数
      this.form = type ? record : {}
    },
    // 切换状态
    handleSwitch(e) {
      let that = this
      let status = ['启用', '停用'][e.status]
      that.$confirm({
        title: '温馨提示',
        content: `确认${status}？`,
        okText: '提交',
        cancelText: '关闭',
        onOk() {
          return checkType.switchStatus({ id: e.id }).then((res) => {
            // if (res.data.code == 200) {
            that.$message.success(status + '成功！')
            that.$refs.table.loadData()
            // } else {
            //   that.$message.warning(status + '失败！')
            // }
          })
        },
      })
    },
  },
}
</script>

